import React from 'react';
import axios from "axios";
import {Table} from "antd"
import './style.css'

interface DataList{
    [propsName:number]:{
        title:string,
        count:number
    }[]
}

interface IState{
    dataList:DataList[]
}
class Show extends React.Component<any, IState>{
    state={
        dataList:[]
    }
    async componentDidMount() {
        let res=await axios.get('/api/showData')
        if(res.data?.sucesss) {
            console.log(res.data.data);
            this.setState({
                dataList:res.data.data
            })
        }
    }
    formatDate(v:number) {

        let date=new Date(v);
        return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getMinutes()
    }
    render() {
        const {dataList} = this.state
        return (
            <div>
                <div className="title-name">展示数据</div>
                {
                    Object.keys(dataList).map((v,i)=>{
                        // @ts-ignore
                        let dataSource=dataList[v]
                        dataSource=dataSource.map((item: { key: any; }, index: number)=>{
                            item.key=index
                            return item
                        })
                        const columns = [
                            {
                                title: '标题',
                                dataIndex: 'title',
                                key: 'title',
                            },
                            {
                                title: '数量',
                                dataIndex: 'count',
                                key: 'count',
                            }
                        ];
                        return (
                            <div key={i}>
                                <div className='show-title'>{this.formatDate(Number(v))}</div>
                                <Table dataSource={dataSource} columns={columns} />
                            </div>

                        )
                    })
                }
            </div>
        );
    }
}


export default Show;